<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CheckboxSelect</title>
    <style>
       #app{
            width: 220px;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: row; 
            padding: 10px;
            justify-content: center;
            list-style: none;
            flex-wrap: wrap;  
          }
           .boxCheck{
            width: 20px;
            height: 20px;
            list-style: none;        
            border:1px solid #ccc;
          } 
    
        
    </style>
</head>
<body>

    <div id="app">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
        <input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck"><input type="checkbox" class="boxCheck">
    </div>
    </div>
    <script>
        (function () {
            document.onmousedown = function() {
                let boxList = [];

                let boxes = document.getElementsByTagName("input");
                for (let i = 0; i < boxes.length; i++) {
                    boxList.push(boxes[i]);
                }
                let isSelect = true;
                // 获取事件触发后的event对象
                let evt = window.event || arguments[0];
                // 存放鼠标点击初始位置
                let startX = (evt.x || evt.clientX);
                let startY = (evt.y || evt.clientY);

                // 创建一个框选元素
                let selDiv = document.createElement("div");
                // 给框选元素添加css样式
                selDiv.style.cssText = "position:absolute;  font-size:0px;  border:1px dashed #0099FF; z-index:1000; filter:alpha(opacity:60); opacity:0.6; display:none";
                // 添加ID
                selDiv.id = "selectDiv";
                // 向节点添加最后一个子节点
                document.body.appendChild(selDiv);
                // 根据起始位置，添加定位
                selDiv.style.left = startX + "px";
                selDiv.style.top = startY + "px";

                // 根据坐标给选框修改状态
                let _x = null;
                let _y = null;
               
            document.oncontextmenu = function(e){
                  e.preventDefault();
                };
            //鼠标右键
            document.body.onmousedown = function(e){
               if(e.button ==2){
                   console.log("你点了右键");
                   if (selDiv) {
                         document.body.removeChild(selDiv);                                     
                    }                   
               }
               if(e.button ==0){
                   console.log("你点了左键");
                   if (selDiv) {
                         document.body.removeChild(selDiv);                                     
                    }
                   
               }
               if(e.button ==1){
                   console.log("你点了中键");
                   if (selDiv) {
                         document.body.removeChild(selDiv);                                     
                    }
                   
               }
              }
                // 移动鼠标
                document.onmousemove = function() {
                    evt = window.event || arguments[0];
                    if (isSelect) {
                        if (selDiv.style.display == "none") {
                            selDiv.style.display = "";
                        }
                        // 获取当前鼠标位置
                        _x = (evt.x || evt.clientX);
                        _y = (evt.y || evt.clientY);
                        selDiv.style.left = Math.min(_x, startX) + 'px';
                        selDiv.style.top = Math.min(_y, startY) + 'px';
                        selDiv.style.width = Math.abs(_x - startX) + 'px';
                        selDiv.style.height = Math.abs(_y - startY) + 'px';

                        let _l = selDiv.offsetLeft;
                        let _t = selDiv.offsetTop;
                        let _w = selDiv.offsetWidth;
                        let _h = selDiv.offsetHeight;
                        for (let i = 0; i < boxList.length; i++) {
                            let sl = boxList[i].offsetWidth + boxList[i].offsetLeft;
                            let st = boxList[i].offsetHeight + boxList[i].offsetTop;

                            if (sl > _l && st > _t && boxList[i].offsetLeft < _l + _w && boxList[i].offsetTop < _t + _h) {
                                boxList[i].checked = true;
                            }
                        }
                    }
                }

                // 放开鼠标，选框消失
                document.onmouseup = function () {
                    isSelect = false;
                  
                  if (selDiv) {
                        document.body.removeChild(selDiv);                                     
                   }

                  
                   
                  

                    boxList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null;
                }

                // 重置
                boxList.forEach((item, index) => {
                    item.checked = false;
                    
                   
                })
            }
        })();
    </script>
</body>
</html>
